const {ccclass, property,executeInEditMode,disallowMultiple,requireComponent} = cc._decorator;
@ccclass
@executeInEditMode
@disallowMultiple
@requireComponent(cc.Mask)
export default class roundMask extends cc.Component {
    _mask:cc.Mask = null;
    _graphics:cc.Graphics = null;
    _old_updateGraphics = null;
    @property()
    _radius:number = 10;
    @property()
    _Angle1:boolean = true;
    @property()
    _Angle2:boolean = true;
    @property()
    _Angle3:boolean = true;
    @property()
    _Angle4:boolean = true;
    @property({
        tooltip: "圆角半径:\n<1为最短边比例长度>, \n>1为像素值\n除rect其余模式失效,移除脚本后正常",
        visible(){
         return this.node.getComponent(cc.Mask).type == cc.Mask.Type.RECT;   
        }
    })
    public get radius(): number {
        return this._radius;
    }
    public set radius(r: number) {
        this._radius = r;
        this.updataMask();
    }
    @property({
        visible() {
            return this.node.getComponent(cc.Mask).type == cc.Mask.Type.RECT;
        }
    })
    public get Angle1(): boolean {
        return this._Angle1;
    }
    public set Angle1(r: boolean) {
        this._Angle1 = r;
        this.updataMask();
    }
    @property({
        visible() {
            return this.node.getComponent(cc.Mask).type == cc.Mask.Type.RECT;
        }
    })
    public get Angle2(): boolean {
        return this._Angle2;
    }
    public set Angle2(r: boolean) {
        this._Angle2 = r;
        this.updataMask();
    }
    @property({
        visible() {
            return this.node.getComponent(cc.Mask).type == cc.Mask.Type.RECT;
        }
    })
    public get Angle3(): boolean {
        return this._Angle3;
    }
    public set Angle3(r: boolean) {
        this._Angle3 = r;
        this.updataMask();
    }
    @property({
        visible() {
            return this.node.getComponent(cc.Mask).type == cc.Mask.Type.RECT;
        }
    })
    public get Angle4(): boolean {
        return this._Angle4;
    }
    public set Angle4(r: boolean) {
        this._Angle4 = r;
        this.updataMask();
    }

    // LIFE-CYCLE CALLBACKS:

    onEnable () {
        this._mask = this.node.getComponent(cc.Mask);
        this._graphics = this.node.getComponent(cc.Mask)['_graphics'];
        this._old_updateGraphics = this.node.getComponent(cc.Mask)['_updateGraphics'];
        this._mask['_updateGraphics'] = this._updateGraphics.bind(this._mask);
        this._mask['_maskRoundRect'] = this._maskRoundRect.bind(this._mask);
        this._mask.node.on('size-changed',this.updataMask,this);
        this._mask.node.on('position-changed',this.updataMask,this);
        this.updataMask();
    }
    protected onDisable(): void {
        this._mask['_updateGraphics'] = this._old_updateGraphics;
        this._mask.type = cc.Mask.Type.RECT;
    }
    updataMask(){
        let radius = this._radius >= 0 ? this._radius : 0;
        let d = Math.min(this.node.width, this.node.height);
        if (radius < 1) {
            radius = d * radius/2;
        }
        radius = radius<1?d * radius/2:radius;
        radius = radius>d/2?d/2:radius;
        this._mask['radius'] = radius;
        this._mask['Angle1'] = this._Angle1;
        this._mask['Angle2'] = this._Angle2;
        this._mask['Angle3'] = this._Angle3;
        this._mask['Angle4'] = this._Angle4;
        this._mask.type = cc.Mask.Type.RECT;
    }
    _updateGraphics(){
        this._graphics.clear(false);//清空
        let width = this.node.width;
        let height = this.node.height;
        let x = -width * this.node.anchorX;
        let y = -height * this.node.anchorY;
        this._maskRoundRect(x,y,width,height,this.radius);
        if (cc.game.renderType === cc.game.RENDER_TYPE_CANVAS) {
            this._graphics.stroke();
        } else {
            this._graphics.fill();
        }
    }
    start () {

    }
    _maskRoundRect (x:number, y:number, w:number, h:number, r:number) {
        let ctx = this._graphics;
        let KAPPA90 = 0.5522847493;
        var rx = Math.min(r, Math.abs(w) * 0.5) * Math.sign(w),
            ry = Math.min(r, Math.abs(h) * 0.5) * Math.sign(h);
        ctx.moveTo(x, y + ry);
        ctx.lineTo(x, y + h - ry);
        if(this.Angle1){
            ctx.bezierCurveTo(x, y + h - ry * (1 - KAPPA90), x + rx * (1 - KAPPA90), y + h, x + rx, y + h);
        }else{
            ctx.lineTo(x, y + h);
        }
        ctx.lineTo(x + w - rx, y + h);
        if(this.Angle2){
            ctx.bezierCurveTo(x + w - rx * (1 - KAPPA90), y + h, x + w, y + h - ry * (1 - KAPPA90), x + w, y + h - ry);
        }else{
            ctx.lineTo(x + w, y + h);
        }
        ctx.lineTo(x + w, y + ry);
        if(this.Angle3){
            ctx.bezierCurveTo(x + w, y + ry * (1 - KAPPA90), x + w - rx * (1 - KAPPA90), y, x + w - rx, y);
        }else{
            ctx.lineTo(x + w, y);
        }
        ctx.lineTo(x + rx, y);
        if(this.Angle4){
            ctx.bezierCurveTo(x + rx * (1 - KAPPA90), y, x, y + ry * (1 - KAPPA90), x, y + ry);
        }else{
            ctx.lineTo(x , y);
        }
        ctx.close();
    }

    // update (dt) {}
}
